<template>
  <el-table v-loading="loading" :data="tableData" :header-cell-style="{background:'rgb(243, 246, 251)'}" @selection-change="handleSelectionChange">
    <el-table-column v-if="isSelect" type="selection" width="55" />
    <el-table-column v-if="isIndexShow" label="序号" type="index" :index="addIndex" />

    <el-table-column
      v-for="(value,item,index) in labels"
      :key="index"
      :label="value"
    >
      <template slot-scope="{row}">
        <slot :name="item" :scope="row">{{ label(row,item) }}</slot>
      </template>
    </el-table-column>

    <el-table-column
      v-if="isoperationShow"
      :label="operationName"
    >
      <template slot-scope="{row}">
        <slot name="operation" :scope="row" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    labels: {
      type: Object,
      required: true
    },
    // checked框
    isSelect: {
      type: Boolean,
      default: false
    },
    // 序号显示
    isIndexShow: {
      type: Boolean,
      default: true
    },
    isoperationShow: {
      type: Boolean,
      default: true
    },
    operationName: {
      type: String,
      default: '操作'
    },
    page: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
    }
  },
  computed: {
    label() {
      return (row, item) => {
        // console.log(row, item)
        if (item.includes('.')) {
          const keys = item.split('.')
          // console.log(row[keys[0]])
          if (row[keys[0]] === null) {
            return '未知'
          }
          return keys.reduce((pre, cur, index) => pre[cur], row)
        } else {
          return row[item]
        }
      }
    }
  },
  methods: {
    handleSelectionChange(row) {
      this.$emit('getSelectVal', row)
    },
    addIndex(index) {
      const pageIndex = this.page.pageIndex // 当前页
      const pageSize = this.page.pageSize // 每页条数
      return index + 1 + (pageIndex - 1) * pageSize
    }
  }
}
</script>

<style>

</style>
